import Head from '../../compontent/Header'
import style from './style.module.less'
import {Layout, Button, Form, message} from 'antd'
import { useHistory } from 'react-router-dom'
import UpdateUserInfo from '../../compontent/UpdateUserInfo'
import UpdatePwd from '../../compontent/UpdatPwd'
import GetAvatar from '../../compontent/GetAvatar'
import * as api from "../../services/api";
import {useEffect, useState} from "react";

export default function PersonalUpdate(props: any) {
  let token: string = props.match.params.id

  const { Header, Content, Sider } = Layout

  const [nickname, setNickname] = useState<string>('')

  const history = useHistory()

  useEffect(()=>{
    getUserInfo()
  },[])

  function jumpPersonal() {
    history.push(`/personal/${token}`)
  }

  async function getUserInfo() {
    try {
      let res = await api.getUserInfo(token)
      if (res.data.stat === 'ok') {
        if (res.data.data.nickname === '') {
          setNickname(res.data.data.account)
        } else {
          setNickname(res.data.data.nickname)
        }
      } else {
        message.error(res.data.msg)
      }
    } catch (e) {
      throw e
    }
  }

  return (
    <>
      <Layout style={{ height: '100%' }}>
        <Head token={token} />
        <Content className={style.main}>
          <Layout>
            <Header className={style.bodyHeader}>
              <span>修改个人信息</span>
            </Header>
            <Layout>
              <Sider className={style.bodySider}>
                <GetAvatar token={token} />
                <p className={style.userName}>{nickname}</p>
                <Button className={style.userUpdate} onClick={jumpPersonal}>
                  返回
                </Button>
              </Sider>
              <Content className={style.bodyContent}>
                <Form className={style.form}>
                  <UpdateUserInfo toen={token} />
                  <UpdatePwd token={token} />
                </Form>
              </Content>
            </Layout>
          </Layout>
        </Content>
      </Layout>
    </>
  )
}
